<template>
  <div class="app-container">
    <content-title></content-title>
    <div class="filter-container">
      <el-input v-model="queryParams.name" clearable class="filter-item" placeholder="名称"
                style="width: 200px;margin-left: 10px;margin-right:5px"
                @keyup.enter.native="getList"/>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="getList">
        搜索
      </el-button>
    </div>

    <el-table v-loading="listLoading" :data="list" element-loading-text="拼命加载中..."
              style="width: 100%" border fit highlight-current-row>
      <el-table-column align="center" label="序号">
        <template slot-scope="scope">
          {{ scope.$index+1+ (queryParams.current-1)*queryParams.size }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="公司名称">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="公司图标">
        <template slot-scope="scope">
          {{ scope.row.logoUrl }}
        </template>
      </el-table-column>

      <el-table-column align="center" label="创建时间">
        <template slot-scope="scope">
          {{ scope.row.createTime }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <link-button style="margin-right: 5px" type="text" :route-name-prefix="$options.name"
                       route-name="Detail"
                       :bid="scope.row.id">
          </link-button>
          <link-button style="margin-right: 5px" type="text" :route-name-prefix="$options.name"
                       route-name="Edit"
                       :bid="scope.row.id">
          </link-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="queryParams.current" :limit.sync="queryParams.size"
                @pagination="getList"/>
  </div>
</template>

<script>
  import {pageList} from '@/api/company'
  import waves from '@/directive/waves' // waves directive
  import Pagination from '@/components/Pagination' // secondary package based on el-pagination

  export default {
    name: 'company',
    components: {Pagination},
    directives: {waves},
    data() {
      return {
        total: 0,
        list: [],
        listLoading: true,
        queryParams: {
          size: 10,
          current: 1,
          name: ""
        },
      }
    },
    created() {
      this.getList()
    },
    methods: {
      getList() {
        this.$business.list(this, pageList)
      }
    }
  }
</script>
